通过 Service Worker 的 fetch 事件可监听页面中的所有请求，因此可通过缓存构建响应，以减少请求的响应时间。Workbox 中的 workbox-routing 模块为我们提供了便捷的方式来匹配并处理请求，本章我们将对该模块进行详细介绍。

# 基本使用

我们通过调用 workbox.routing.registerRoute 方法来注册并处理请求，方法参数依次为：

• capture：请求匹配规则，类型为字符串、正则表达式、函数或 workbox.routing.Route。
• handler：请求处理函数，返回值为 Promise<Response>，参数为含有以下属性的对象：
  • url：匹配到的请求地址，类型为：URL。
  • event：触发请求的 FetchEvent 对象，该属性为可选属性。
  • request：触发请求的 Request 对象，该属性为可选属性。
  • params：请求匹配函数的返回值，类型为非空数组、非空对象或 undefined。
  • 注：该参数的值亦可为含有属性 handle的对象，且属性 handle 的值与参数值为函数时一致。
• method：请求方法，值为 GET、HEAD、POST、PATCH、PUT 或 DELETE，默认值为 GET。

下面我们通过一些示例来介绍 workbox.routing.registerRoute 的使用：

1. 当 capture 的值为正则表达式时：

workbox.routing.registerRoute(
  new RegExp('/styles/.*\\.css'),
  ({ url, event, request, params }) => Promise.resolve(new Response(...))
);

示例中，我们注册了 /styles 路径下 css 文件请求的监听处理，需要注意的是，由于同源策略的影响，此时 capture 的值将无法匹配第三方站点的请求，比如：

https://cdn.third-party-site.com/styles/main.css

如果想要正确匹配第三方资源，只需要保证正则表达式能够与请求 URL 的开头相匹配即可，因此 capture 的值可修改为：new RegExp('https://.*/styles/.*\\.css')

2. 当 capture 的值为函数时：

workbox.routing.registerRoute(
  ({ url, event, request }) => true,
  ({ url, event, request, params }) => Promise.resolve(new Response(...))
);